import { messages } from 'share/common';
import { USER_DETAIL_COLUMNS, COMMON_REPORT_CONFIG, } from '../constant';
import React from 'react';
import Charts from 'components/template/graphic-report/report-echarts';
import VScrollEchartsV2 from 'components/template/graphic-report/vscroll-echarts';
import ReportTable from 'components/template/graphic-report/report-table';
import CostCenterChart from 'components/template/graphic-report/cost-center-chart';
import FeeReportService from '../report-private-service/fee-report.service';
import { toggleShowLabel, commonUtilsFactory } from '../echarts-data-transfer/utils';
import { getLocalStorageWithAutoParse } from 'share/common';
import ReportOverviewSimple from 'components/template/graphic-report/report-overview-simple';
import ExportModal from 'components/template/export-modal/export-modal';

const reportKeyPrefix = 'hly.reportLabel.10010.';
const expenseTendencyLabelKey = `${reportKeyPrefix}expenseTendencyReport`;
const expenseTypeLabelKey = `${reportKeyPrefix}expenseTypeReport`;
const departmentExpenseLabelKey = `${reportKeyPrefix}departmentExpenseReport`;
const userExpenseLabelKey = `${reportKeyPrefix}userExpense`;
const costCenterLabelKey = `${reportKeyPrefix}costCenterReport`;

/**
 * 费用分析图表
 * id 10010
 *
 * config配置注释见 report-private.service
 */

export default (context) => {
  let expenseTendencyShowLabel = getLocalStorageWithAutoParse(expenseTendencyLabelKey);
  if (expenseTendencyShowLabel === undefined) {
    expenseTendencyShowLabel = true;
  }

  let expenseTypeShowLabel = getLocalStorageWithAutoParse(expenseTypeLabelKey);
  if (expenseTypeShowLabel === undefined) {
    expenseTypeShowLabel = true;
  }

  let departmentExpenseShowLabel = getLocalStorageWithAutoParse(departmentExpenseLabelKey);
  if (departmentExpenseShowLabel === undefined) {
    departmentExpenseShowLabel = true;
  }

  let userExpenseShowLabel = getLocalStorageWithAutoParse(userExpenseLabelKey);
  if (userExpenseShowLabel === undefined) {
    userExpenseShowLabel = true;
  }

  let costCenterShowLabel = getLocalStorageWithAutoParse(costCenterLabelKey);
  if (costCenterShowLabel === undefined) {
    costCenterShowLabel = true;
  }


  return {
    reportExport: {
      style: {
        width: '100%',
        margin: '10px 20px'
      },
      render: ({ config, context }) => {
        const { transParams, reportConfig } = context.state;
        const isDisabled = !((reportConfig.userDetailExpenseReport.ref || {}).state || {}).list;
        return (
          <div className="report-row">
            <ExportModal
              style={config.style}
              type={'btn'}
              btnType={'primary'}
              codeCheck={true}
              disabled={isDisabled}
              clickPropagationEnable
              exportTitle={messages('finance-7.key193')/*导出数据*/}
              exportType="EXPENSE_ANALYSIS"
              exportCondition={{
                'command': 'EXPENSE_ANALYSIS',
                'exportType': 'EXPENSE_ANALYSIS',
                'reportSearchDTO': {},
                'expenseAnalysisRequestEntity': transParams,
              }}
              exportCommand={'EXPENSE_ANALYSIS'}
            />
          </div>
        );
      }
    },
    reportOverview: {
      title: messages('finance-7.key171')/*报表概览*/,
      isLoading: false,
      fetchMethod: FeeReportService.getReportDetailTotal,
      options: [{
        title: messages('finance-7.key194')/*总报销金额*/,
        detail: 0
      }, {
        title: messages('finance-7.key195')/*总人数*/,
        detail: 0
      }, {
        title: messages('finance-7.key196')/*员工平均金额*/,
        detail: 0
      }],
      render: ({ config }) => {
        return (
          <ReportOverviewSimple
            title={config.title}
            cols={8}
            data={config.options}
            dataLength={1}
            loading={false}
          />
        );
      }
    },
    statusAmountReport: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key197')/*报销状态占比*/,
      fetchMethod: FeeReportService.getReportDetailReportStatus,
      activeConfig: {
        key: 'filterStatus',
        array: true
      },
      render: ({ config, context }) => {
        let { isFetchingData } = context.state;
        const { isLoading, options, dataLength, title } = config;
        return (
          <Charts
            allowActivated
            title={title}
            cols={16}
            dataLength={dataLength}
            options={options}
            reportKey='statusAmountReport'
            reportType='pie'
            isFetchingData={isFetchingData}
            loading={isLoading}
            onActivatedItemChange={context.onChartClick}
            onRef={context.onMountCharts}
          />
        );
      }
    },
    expenseTendencyReport: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key198')/*费用总体趋势报表*/,
      fetchMethod: FeeReportService.getExpenseAnalysisReport,
      showLabel: expenseTendencyShowLabel,
      activeConfig: {
        key: 'filterYearMonths',
        array: true
      },
      render: ({ config, context, reportType }) => {
        let { isFetchingData } = context.state;
        let { isLoading, options, dataLength, title } = config;

        const utils = commonUtilsFactory({ context, reportType, config, reportKeyPrefix });
        options = toggleShowLabel({ config, options });
        return (
          <Charts
            allowActivated
            title={title}
            cols={24}
            utils={utils}
            dataLength={dataLength}
            options={options}
            reportKey='expenseTendencyReport'
            reportType='tendency'
            isFetchingData={isFetchingData}
            loading={isLoading}
            compareKey='monthName'
            onActivatedItemChange={context.onChartClick}
            onRef={context.onMountCharts}
          />
        );
      }
    },
    expenseTypeReport: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key199')/*费用类型分析*/,
      fetchMethod: FeeReportService.getReportDetailExpenseType,
      showLabel: expenseTypeShowLabel,
      activeConfig: {
        key: 'filterExpenseTypeIds',
        array: true
      },
      render: ({ config, context, reportType }) => {
        let { isFetchingData } = context.state;
        let { isLoading, options, dataLength, title } = config;

        const utils = commonUtilsFactory({ context, reportType, config, reportKeyPrefix });
        options = toggleShowLabel({ config, options });
        return (
          <VScrollEchartsV2
            allowActivated
            title={title}
            dataLength={dataLength}
            options={options}
            cols={8}
            utils={utils}
            reportKey='expenseTypeReport'
            isFetchingData={isFetchingData}
            loading={isLoading}
            onActivatedItemChange={context.onChartClick}
            onRef={context.onMountCharts}
          />
        );
      }
    },
    departmentExpenseReport: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key200')/*部门费用分析*/,
      fetchMethod: FeeReportService.getReportDetailDepartmentExpense,
      showLabel: departmentExpenseShowLabel,
      activeConfig: {
        key: 'filterDepartmentCodes',
        array: true
      },
      render: ({ config, context, reportType }) => {
        let { isFetchingData } = context.state;
        let { isLoading, options, dataLength, title } = config;

        const utils = commonUtilsFactory({ context, reportType, config, reportKeyPrefix });
        options = toggleShowLabel({ config, options });
        return (
          <VScrollEchartsV2
            allowActivated
            title={title}
            dataLength={dataLength}
            options={options}
            cols={8}
            utils={utils}
            reportKey='departmentExpenseReport'
            isFetchingData={isFetchingData}
            loading={isLoading}
            onActivatedItemChange={context.onChartClick}
            onRef={context.onMountCharts}
          />
        );
      }
    },
    userExpense: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key201')/*人员费用分析*/,
      fetchMethod: FeeReportService.getReportDetailUserExpense,
      showLabel: userExpenseShowLabel,
      activeConfig: {
        key: 'filterApplicantOids',
        array: true
      },
      render: ({ config, context, reportType }) => {
        let { isFetchingData } = context.state;
        let { isLoading, options, dataLength, title } = config;

        const utils = commonUtilsFactory({ context, reportType, config, reportKeyPrefix });
        options = toggleShowLabel({ config, options });
        return (
          <VScrollEchartsV2
            allowActivated
            title={title}
            dataLength={dataLength}
            options={options}
            cols={8}
            utils={utils}
            reportKey='userExpense'
            isFetchingData={isFetchingData}
            loading={isLoading}
            onActivatedItemChange={context.onChartClick}
            onRef={context.onMountCharts}
          />
        );
      }
    },
    userDetailExpenseReport: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key202')/*人员费用明细*/,
      fetchMethod: FeeReportService.getReportDetailUserDetailExpense,
      isTable: true,
      columns: USER_DETAIL_COLUMNS,
      render: ({ config, context }) => {
        return (
          <ReportTable
            title={config.title}
            cols={24}
            columns={config.columns}
            fetchMethod={config.fetchMethod}
            onRef={context.onMountCharts}
            dataLength={1}
            reportKey='userDetailExpenseReport'
          />
        );
      }
    },
    costCenterReport: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key155')/*成本中心*/,
      fetchMethod: FeeReportService.getReportDetailCostCenter,
      showLabel: costCenterShowLabel,
      activeConfig: {
        key: 'filterCostCenterItemOids',
        array: true
      },
      render: ({ config, context, reportType }) => {
        let { isFetchingData } = context.state;
        let { isLoading, options, dataLength, title, showLabel } = config;

        const utils = commonUtilsFactory({ context, reportType, config, reportKeyPrefix });
        if (options && options.length) {
          options.forEach(item => {
            let subOptions = item.costCenterExpenseEntity;
            if (subOptions && subOptions.series) {
              subOptions.series.forEach(subItem => {
                if (subItem.label) {
                  subItem.label.normal.show = showLabel;
                }
              });
              item.costCenterExpenseEntity = Object.assign({}, subOptions);
            }
          });
        }
        return (
          <CostCenterChart
            title={title}
            cols={24}
            utils={utils}
            dataLength={dataLength}
            options={options}
            reportKey={'costCenterReport'}
            isFetchingData={isFetchingData}
            loading={isLoading}
            onActivatedItemChange={context.onChartClick}
            onRef={context.onMountCharts}
          />
        );
      }
    },
  };
}
